<!-- 关联用户 -->
<template>
	<div class="userinfo" @tap="changeAccount()">
		<view class="u-flex-y-center">
			<u-avatar :size="100"
				:src="info.gender == '女' ? '/static/avatar/avatar1.png' : '/static/avatar/avatar2.png'"></u-avatar>
			<view class="u-m-l-22 u-flex-sub">
				<view class="u-flex-y-center">
					<view class="name">{{ info.realName || '--' }}</view>
					<text class="u-m-l-10 u-m-r-10 age">{{ getAgeByBirthday(info.birth) }}</text>
					<image class="sex" src="/static/female.png" v-if="info.gender == '女'"></image>
					<image class="sex" src="/static/male.png" v-else></image>
				</view>
				<view class="u-m-t-10 u-m-b-10 phone">{{ info.phone }}</view>
			</view>
			<u-icon v-if="!isChange" name="arrow-right" size="34"></u-icon>
		</view>
		<!-- <view class="u-flex u-m-t-20">
			<view class="tag" v-if="info.sickerGrade == 3"><u-tag text="三级用户" plain size="mini" type="primary" shape="circle"></u-tag></view>
			<view class="tag" v-if="info.sickerGrade == 2"><u-tag text="二级用户" plain size="mini" type="warning" shape="circle"></u-tag></view>
			<view class="tag" v-if="info.sickerGrade == 1"><u-tag text="一级用户" plain size="mini" type="error" shape="circle"></u-tag></view>
		</view> -->
		<view class="u-flex u-m-t-20 solid-top u-p-t-20"
			v-if="info.illnessGradeNames&&info.illnessGradeNames.length>0&&info.illnessGradeNames.filter(item=>item)">
			<view class="tag" v-for="(item,index) in info.illnessGradeNames.filter(item=>item)" :key="index">
				<u-tag :text="item" plain size="mini" :type="filterLevel(item)" shape="circle"></u-tag>
			</view>
		</view>
		<view class="tips" v-if="isChange && info.patientId == curAccount.patientId">当前就诊</view>
	</div>
</template>

<script>
	import {
		getAgeByBirthday,
		filterLevel
	} from '@/utils/index.js';
	import {
		getAccountUserList
	} from '@/service/api.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'userItem',
		data() {
			return {
				filterLevel
			};
		},
		computed: {
			...mapState(['curAccount'])
		},
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			isChange: {
				type: Boolean,
				defalut: false
			}
		},
		methods: {
			...mapMutations(['$uStore']),
			changeAccount() {
				if (this.isChange) {
					this.setCurrentHospPatientInfo()
					this.$uStore({
						name: 'curAccount',
						value: this.info
					});
					uni.navigateBack();
				} else {
					uni.navigateTo({
						url: '/pages/login/regInfo?detailId=' + this.info.detailId
					});
				}
			},
			//设置首页病人信息
			setCurrentHospPatientInfo() {
				this.$postAction(this.$api.setCurrentHospPatientInfo, {
					patientId: this.info.patientId
				}).then(da => {
					console.log("设置首页病人信息", JSON.stringify(da))
				});
			},
			getAgeByBirthday(strDay) {
				if (strDay) {
					let age = getAgeByBirthday(strDay);
					return age + '岁';
				}
				return '--';
			}
		}
	};
</script>

<style scoped lang="scss">
	.userinfo {
		color: #1c2023;
		font-size: 24upx;
		z-index: 999;
		margin: 20upx 20upx 0;
		padding: 20rpx;
		position: relative;
		background: #fff;
		border-radius: 10upx;

		.name {
			font-size: 32upx;
			margin-right: 10upx;
			font-weight: 600;
		}

		.age,
		.phone {
			font-size: 30upx;
			color: #36374d;
		}

		.sex {
			width: 30upx;
			height: 30upx;
			margin-right: 10upx;
		}

		.tag {
			margin-right: 10rpx;
		}

		.state {
			color: #ff8629;
			font-weight: 500;
			font-size: 32rpx;

			&.state-green {
				color: #0b8a86;
			}

			&.state-red {
				color: #fc001a;
			}
		}

		.tips {
			position: absolute;
			top: 0;
			right: 0;
			padding: 10upx 20upx 10upx 20upx;
			font-size: 30upx;
			background: $u-primary;
			border-radius: 0 30upx 0 20upx;
			color: #fff;
		}
	}
</style>